django新手村10-----關於註冊

django

andrew8674 2021-12-31 11:29:23 ‧ 923 瀏覽

分享至

上一篇用到的註冊，其實是有點小問題的，像是如果用戶名重複了，或是帳號密碼都不打也可以註冊

這一篇比較注重jquery，可能比較難?大概說說概念

當用戶名重複，最簡單的方法就是直接刷新，但是這樣用戶會覺得莫名其妙，剛剛打的資料都白打了

所以要在html添加jquery預處理判斷是否已有該用戶名稱，如果有button就繼續無法使用，如果沒有，就會讓button可以點擊

$.getJSON('../check/',{'username':username}, function(data)
第一個變數是url，第二個是傳直到url(get方式)，第三個是那個url回傳的值
check必須要使用JsonResponse

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   
    <script>
    
    $(document).ready(function(){
        
        var name = $("#name");

        name.on({
        blur:function(){
            console.log(name.val().trim())
            var username = name.val().trim()

            if (username.length){
                
                $.getJSON('../check/',{'username':username}, function(data){
                    
                    console.log(data)
                    if (data['check']){
                        $("#hint").html('ok').css('color','green');
                        $('#btn').attr('disabled',false);
                    }
                    else{
                        $("#hint").html('wrong').css('color','red')
                    }
                    
                })
                
            }
            }          
        })

    })

    </script>
    
</head>
<body>
    <form action="{% url 'three:doregister'%}" method="post">
<!--        {% csrf_token %}-->
        <span>username: <input type="text" name="username" id="name"></span>
        <br>
        <span id="hint"> </span>
        <br>
        <span>password: <input type='password' name="password" required></span>
        <br>
        <button disabled='disabled' id="btn">register</button>
        
    </form>
</body>
</html>

views.py

def check(request):

    username = request.GET.get('username')

    person = Person.objects.filter(name=username).first()

    if person:
        return JsonResponse(data={'check': False})

    return JsonResponse(data={'check': True})